<template>
	<div class="bg">
		<goback :title="title"></goback>
		<div v-if="gameplayshow" class="info-box">
			<div class="puzzle-container">
				<h2 class="game-title">当前是第{{ level + 1 }}关，当前状态[{{status }}]
				</h2>
			</div>

			<puzzle ref="dpuzzle" @getStatus="getStatus" @next="handleNext"
				:imgSrc="require(`@/assets/img/${puzzleConfig[level].img}`)" :row="puzzleConfig[level].row"
				:col="puzzleConfig[level].col" />
			<div class="game-img-box">
				<h2 class="game-img-title">原图：</h2>
				<img :src="require(`@/assets/img/${puzzleConfig[level].img}`)" alt="" class="img-size">
				<button @click="gameplay" class="btn-close">退出游戏</button>
			</div>
		</div>
		<div v-else>
			<div class="card">
				<div class="card_title">秸秆 · GAME · 介绍</div>
				<div class="info">
					这款小游戏是一款有趣的拼图游戏，旨在展示秸秆的重要性和多功能性。在游戏中，玩家将挑战不同难度的拼图关卡，每一关都有一个秸秆相关的主题图片作为拼图的原图。玩家需要通过移动拼图块的位置，将拼图正确地组合在一起，还原原始图片。
				</div>
				<div class="info">
					通过参与这款游戏，玩家可以增强对秸秆的认识，了解秸秆在农业和生活中的重要作用，以及秸秆的多样化用途。完成每个关卡后，玩家将获得相应的奖励，例如积分、勋章等物品，以鼓励玩家继续探索和完成游戏。
				</div>
				<div class="info">欢迎您体验这款有教育意义的拼图游戏，一起探索秸秆的奥秘和美妙之处！</div>
				<button @click="gameplay" class="btn-play">开始游戏</button>
			</div>
		</div>


		<!-- <button @click="handleNext" style="width:20px,height:20px" value="下一关">下一关</button> -->

	</div>
</template>
<script>
	import puzzle from '@/components/puzzle.vue';
	export default {
		components: {
			puzzle,
		},
		data() {
			return {
				title: "拼图游戏",
				level: 0,
				puzzleConfig: [{
					img: "2.jpg",
					row: 3,
					col: 3
				}],
				status: "进行中......",
				gameplayshow: false
			};
		},
		methods: {
			canIPuzzle(){
				this.axios.get(`${this.IP}/can_i_puzzle`, {
					params:{
						token: this.getStorage("token")
					}
				}).then(res => {
					this.$toast.showMessage(res.data);
					
					if(!res.data.includes('开始拼图')){
						this.$router.go(-1);
					}else{
						this.gameplayshow = !this.gameplayshow;
					}
					
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			submitPuzzle(){
				this.axios.get(`${this.IP}/final_todays_puzzle`, {
					params:{
						token: this.getStorage("token")
					}
				}).then(res => {
					this.$toast.showMessage(res.data);
					this.$router.go(-1);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			handleNext() {
				console.log("next");
				this.status = this.$refs.dpuzzle.status;
				this.level++;
				this.submitPuzzle();
			},
			getStatus() {
				
				this.status = this.$refs.dpuzzle.status;
			},
			gameplay() {
				this.canIPuzzle();
				
			}
		},
	};
</script>

<style scoped>
	/* 容器样式 */
	.puzzle-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	/* 拼图组件样式 */
	.puzzle-component {
		width: 80vw;
		/* 根据需要调整宽度 */
		max-width: 600px;
		/* 控制最大宽度 */
	}

	.game-img-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	/* 标题样式 */
	.game-title {
		font-size: 5vw;
		margin-bottom: 20px;
	}

	.game-img-title {
		font-size: 5vw;
		margin-bottom: 2vw;
		margin-left: 2vw;
	}

	.img-size {
		width: 80vw;
		/* 根据需要调整宽度 */
		max-width: 600px;
		/* 控制最大宽度 */
	}

	.info-box {
		width: 94%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		border-radius: 4vw;
		margin: 1vw auto;
	}

	.info {
		width: 90%;
		margin: 1vw auto;
		padding: 2vw;
		font-size: 4vw;
		text-indent: 8vw;
	}

	.btn-play {
		width: 28vw;
		height: 10vw;
		margin-bottom: 4vw;
		letter-spacing: 2vw;
		margin:0 30vw;
		background-color: #444;
		border-radius: 10px;
		color: white;
		font-weight: bold;
	}

	.btn-close {
		width: 28vw;
		height: 10vw;
		background-color: #444;
		margin-top: 4vw;
		letter-spacing: 2vw;
		border-radius: 10px;
		color: white;
		font-weight: bold;
	}
</style>